<template>
	<view class="bg">
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm="confirm"></u-modal>
		<view class="bg_top">
			
		
		<u-form :model="zdcqFrom" ref="uForm" :rules="rules" label-width="160" :label-style="{
        fontSize: '24rpx',
        fontFamily: 'PingFang SC',
        fontWeight: '400',
        color: '#272B32',
      }">
			<view class="item">
				<u-form-item label="地块名称">
					<u-input v-model="zdcqFrom.itemCode_dictText" disabled />
				</u-form-item>
				<u-form-item label="数据时间">
					<u-input v-model="zdcqFrom.dataTime" disabled />
				</u-form-item>
				<u-form-item label="报送周期">
					<u-input v-model="zdcqFrom.fillCycle_dictText" disabled />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="珍贵木种" :required="true" prop="trees">
					<u-input v-model="zdcqFrom.trees" type="number" />
				</u-form-item>
				<u-form-item label="坟墓迁移" :required="true" prop="graves">
					<u-input v-model="zdcqFrom.graves" type="number" />
				</u-form-item>
				<u-form-item label="杆线迁移" :required="true" prop="barLine">
					<u-input v-model="zdcqFrom.barLine" type="number" />
				</u-form-item>
			</view>
			<view class="sub_title">征地</view>
			<view class="item">
				<u-form-item label="计划征地面积（亩）" label-width="350">
					<u-input v-model="zdcqFrom.planLandArea" disabled />
				</u-form-item>
				<u-form-item label="本年计划征地面积（亩）" label-width="350">
					<u-input v-model="zdcqFrom.yearPlanLandArea" disabled />
				</u-form-item>
				<u-form-item label="本年累计征地面积（亩）" label-width="350" :required="true" prop="yearLandAreaTotal">
					<u-input v-model="zdcqFrom.yearLandAreaTotal" />
				</u-form-item>
				<u-form-item label="累计征地面积（亩）" label-width="350" :required="true" prop="landAreaTotal">
					<u-input v-model="zdcqFrom.landAreaTotal" />
				</u-form-item>
				<u-form-item label="本周期完成征地面积（亩）" label-width="350" :required="true" prop="cycleLandArea">
					<u-input v-model="zdcqFrom.cycleLandArea" />
				</u-form-item>
			</view>

			<view class="sub_title">拆迁</view>
			<view class="item">
				<u-form-item label="本年计划拆迁面积（m²）" label-width="350">
					<u-input v-model="zdcqFrom.yearPlanRemoveArea" disabled />
				</u-form-item>
				<u-form-item label="本年累计拆迁面积（m²）" label-width="350">
					<u-input v-model="zdcqFrom.yearRemoveAreaTotal" disabled />
				</u-form-item>
				<u-form-item label="计划拆迁面积（m²）" label-width="350" :required="true" prop="planRemoveArea">
					<u-input v-model="zdcqFrom.planRemoveArea" />
				</u-form-item>
				<u-form-item label="累计拆迁面积（m²）" label-width="350" :required="true" prop="removeAreaTotal">
					<u-input v-model="zdcqFrom.removeAreaTotal" />
				</u-form-item>
				<u-form-item label="本周期完成拆迁面积（m²）" label-width="350" :required="true" prop="cycleRemoveArea">
					<u-input v-model="zdcqFrom.cycleRemoveArea" />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="进度情况" label-position="top" :required="true" prop="imageProgress">
					<u-input v-model="zdcqFrom.imageProgress" />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="下步计划" label-position="top" :required="true" prop="nextPlan">
					<u-input v-model="zdcqFrom.nextPlan" />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="存在问题" label-position="top" :required="true" prop="problems">
					<u-input v-model="zdcqFrom.problems" />
				</u-form-item>
			</view>
			<!-- <view class="button" @click="Submit">提交</view> -->
		</u-form>
		</view>
		<view class="tqxt_buttons">
			<view @click="jump">查看历史</view>
			<view @click="Submit">提交</view>
			<view @click="tips">征迁已完成</view>
		</view>
	</view>
</template>

<script>
	import {
		zdcqDetails,zdcqSubmit,xmjzJztbComplete
	} from "@/request/zdxm.js"
	export default {
		data() {
			return {
				show: false,
				content: '',
				dataObj1: {},
				dataObj2: {},
				zdcqFrom: {},
				rules: {
					trees: [{
						type: 'number',
						required: true,
						message: '请输入珍贵木种数量',
						trigger: ['change', 'blur'],
					}],
					graves: [{
						type: 'number',
						required: true,
						message: '请输入坟墓迁移数量',
						trigger: ['change', 'blur'],
					}],
					barLine: [{
						type: 'number',
						required: true,
						message: '请输入杆线迁移数量',
						trigger: ['change', 'blur'],
					}],
					yearLandAreaTotal: [{
						type: 'number',
						required: true,
						message: '请输入本年累计征地面积',
						trigger: ['change', 'blur'],
					}],
					landAreaTotal: [{
						type: 'number',
						required: true,
						message: '请输入累计征地面积',
						trigger: ['change', 'blur'],
					}],
					cycleLandArea: [{
						type: 'number',
						required: true,
						message: '请输入本周期完成征地面积',
						trigger: ['change', 'blur'],
					}],
					planRemoveArea: [{
						type: 'number',
						required: true,
						message: '请输入计划拆迁面积',
						trigger: ['change', 'blur'],
					}],
					removeAreaTotal: [{
						type: 'number',
						required: true,
						message: '请输入累计拆迁面积',
						trigger: ['change', 'blur'],
					}],
					cycleRemoveArea: [{
						type: 'number',
						required: true,
						message: '请输入本周期完成拆迁面积',
						trigger: ['change', 'blur'],
					}],
					imageProgress: [{
						required: true,
						message: '请输入进度情况',
						trigger: ['change', 'blur'],
					}],
					nextPlan: [{
						required: true,
						message: '请输入下步计划',
						trigger: ['change', 'blur'],
					}],
					problems: [{
						required: true,
						message: '请输入存在问题',
						trigger: ['change', 'blur'],
					}],
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.dataObj1 = JSON.parse(option.item)
			this.dataObj1.trees = 0
			this.dataObj1.graves = 0
			this.dataObj1.barLine = 0
			this.zdcqDetails()
		},
		methods: {
			jump(){
				uni.navigateTo({
				    url: './lsjl?id='+this.zdcqFrom.subProcessCode
				});
			},
			tips() {
				// 完成以建设确认
				this.btnType = 2
				this.show = true;
				this.content = '征迁已完成，确定提交审核？	'
			},
			confirm(){
				if (this.btnType === 1) {
					zdcqSubmit(this.zdcqFrom).then((res) => {
						if (res.data.code === 200) {
							this.$refs.uToast.show({
								title: res.data.message,
								type: "success",
								duration: 2000,
								callback() {
									uni.redirectTo({
										url: '../todo/index'
									});
								}
							});
						}
					})
				} else if (this.btnType === 2) {
					xmjzJztbComplete({
							subProcessCode: this.zdcqFrom.subProcessCode
						})
						.then((res) => {
							if (res.data.code === 200) {
								this.$refs.uToast.show({
									title: res.data.message,
									type: "success",
									duration: 2000,
									callback() {
										uni.redirectTo({
											url: '../../todo/index'
										});
									}
								});
							}
						})
				}
				
			},
			Submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.show = true
						this.btnType = 1
						this.content = '是否确认提交该填报进展'
					} else {
						console.log('验证失败');
					}
				});
			},
			zdcqDetails() {
				zdcqDetails({
					relocateCode: this.dataObj1.relocateCode,
					itemCode: this.dataObj1.itemCode,
					subProcessCode: this.dataObj1.subProcessCode,
					relocateType: '3'
				}).then((res) => {
					this.dataObj2 = res.data.result
					this.zdcqFrom = Object.assign(this.dataObj1, this.dataObj2);
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.bg_top{
		padding-bottom: 100rpx;
	}
	.item {
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding-left: 30rpx;
	}

	.sub_title {
		padding-left: 20rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3074ff;
	}

	.button {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		background: #3074ff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
	}
	.tqxt_buttons {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
	
		view:nth-child(1) {
			flex: 1;
			background: #ffffff;
			border: 1rpx solid #e7e9f0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8e9cb3;
		}
	
		view:nth-child(2) {
			flex: 1;
			background: #3074ff;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	
		view:nth-child(3) {
			flex: 1;
			background: #ff9900;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
</style>
